<!--
	两排演示
-->

<template>
	<uv-scroll-list>
		<view class="menu-container">
			<view class="menu-container-scroll">
				<view
					class="line"
					v-for="(item, index) in list"
					:key="index"
				>
					<view
						class="item"
						v-for="(item1, index1) in item"
						:key="index1"
						:class="[(index1 === item.length - 1) && 'no-margin-right']"
					>
						<image
							class="image"
							:src="menuBaseUrl + item1.image_url"
							mode=""
						></image>
						<text class="text">{{ item1.title }} </text>
					</view>
				</view>
			</view>
		</view>
	</uv-scroll-list>
	
</template>

<script>

  const menuList= [
				[
					{ icon: 'calendar', text: '课程', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'list-dot', text: '话术', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'integral', text: '会员', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'kefu-ermai', text: '客服', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'grid', text: '全部分类', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'calendar', text: '情感大师', color: 'red', iconColor: '#F24D4D' },
					{ icon: 'list-dot', text: '话术', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'integral', text: '会员', color: 'yellow', iconColor: '#F2C94C' },
					{ icon: 'kefu-ermai', text: '客服', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'grid', text: '全部分类', color: 'blue', iconColor: '#2468F2' },
				]
			];
	const 	menuArr2 = [
				[{
						title: '天猫新品',
						image_url: '11.png'
					},
					{
						title: '今日爆款',
						image_url: '9.png'
					}, {
						title: '天猫国际',
						image_url: '17.png'
					}, {
						title: '饿了么',
						image_url: '6.png'
					}, {
						title: '天猫超市',
						image_url: '11.png'
					}, {
						title: '分类',
						image_url: '2.png'
					}, {
						title: '天猫美食',
						image_url: '3.png'
					}, {
						title: '阿里健康',
						image_url: '12.png'
					}, {
						title: '口碑生活',
						image_url: '7.png'
					}
				],
				[{
						title: '充值中心',
						image_url: '8.png'
					},
					{
						title: '机票酒店',
						image_url: '10.png'
					}, {
						title: '金币庄园',
						image_url: '18.png'
					}, {
						title: '阿里拍卖',
						image_url: '15.png'
					}, {
						title: '淘宝吃货',
						image_url: '16.png'
					}, {
						title: '闲鱼',
						image_url: '4.png'
					}, {
						title: '会员中心',
						image_url: '6.png'
					}, {
						title: '造点新货',
						image_url: '13.png'
					}, {
						title: '土货鲜食',
						image_url: '14.png'
					}
				]
			];	
	

  export default {
    name: 'TmpBannerIconDemo',
    props: {
	  menuBaseUrl:String,
      title: String,
      list: Array,
      colorData: String // yellow/blue/gray/green
    },
	data()  {
		return {
			menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
			
		}
	}
  }
</script>

<style >


.menu-container-scroll {
	display: flex;
	flex-direction:column;
	height: 360rpx;
}

.menu-container-scroll .line {
	display: flex;
	margin-top: 10px;
}

.menu-container-scroll .item {
	margin-right: 15px;
}
.menu-container-scroll .image {
	width: 61px;
	height: 48px;
}

.menu-container-scroll .text {
	margin-top: 5px;
	color: $uv-content-color;
	font-size: 12px;
	text-align: center;
}

.menu-container-scroll .no-margin-right {
	margin-right: 0;
}
	
</style>
